<!--百分比饼图-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'PercentPieChart',
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.1',
      configDataTemp: Object.assign({

        chartOption: {
          title: PnDesigner.buildTitleConfigData(),

          insideRadius: '70%',
          outsideRadius: '90%',

          totalSteps: 100,
          startColor: '',
          stopColor: '',
          innerStrokeColor: '#323232',

          showLabel: true,
          prefixText: '',
          suffixText: '%',
          textColor: '#fff',
          textFontSize: 30
        },

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            'value': 46
          }
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {

      this.init();

      this.setTimer(() => {
        this.init()
      })
    },
    methods: {

      init() {
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      },

    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          series: [{
            type: 'pie',
            radius: [this.component.compConfigData.chartOption.outsideRadius, this.component.compConfigData.chartOption.insideRadius],
            hoverAnimation: false,
            labelLine: {
              show: false
            },
            data: [
              {
                value: [this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].value],
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: this.component.compConfigData.chartOption.startColor
                        ? this.component.compConfigData.chartOption.startColor : this.currentEchartThemeColors[0] // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: this.component.compConfigData.chartOption.stopColor
                        ? this.component.compConfigData.chartOption.stopColor : this.currentEchartThemeColors[7] // 100% 处的颜色
                    }],
                  }
                },
                // label: {
                //   show: false
                // }
                label: {
                  normal: {
                    formatter: (e) => {
                      return this.component.compConfigData.chartOption.prefixText +
                        (e.value / this.component.compConfigData.chartOption.totalSteps * 100).toFixed(0)
                        + this.component.compConfigData.chartOption.suffixText
                    },
                    position: 'center',
                    show: this.component.compConfigData.chartOption.showLabel,
                    textStyle: {
                      fontSize: this.component.compConfigData.chartOption.textFontSize,
                      fontWeight: 'normal',
                      color: this.component.compConfigData.chartOption.textColor
                    }
                  }
                },
              },
              {
                markArea: {
                  silent: true,
                },
                value: this.component.compConfigData.chartOption.totalSteps - this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].value,
                itemStyle: {
                  color: this.component.compConfigData.chartOption.innerStrokeColor,  // 底色
                },
                label: {
                  show: false
                }
              }
            ]
          }]
        };


        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    },
    watch: {}
  };

  export default _this
</script>

<style scoped>

</style>
